<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!--执行一次性地插值-->
			<span>Message: {{ a }}</span>
			
			<!--双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令-->
			<div v-html="'message: '+ b"></div>
			
			<!--mustache 语法不能作用在 HTML 特性上，应该使用 v-bind 指令-->
			<div v-bind:id="id"></div>
			<button v-bind:disabled="yes">Button</button>
			
			<!--使用JavaScript 表达式-->
			<div>结果: {{number + 1}}</div>
			
			<!--指令-->
			<p v-if="seen">现在你看到我了</p>
			<a v-bind:href="url">URL</a>
			<div v-on:click="doSomething">doSomething</div>
			
			<!--.prevent 修饰符告诉 v-on 指令对于触发的事件调用--> 
			<form v-on:submit.prevent="onSubmit"></form>
			
			<!--Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写-->
			
			<!--v-bind-->
			<!-- 完整语法 -->
			<a v-bind:href="url"></a>
			<!-- 缩写 -->
			<a :href="url"></a>
			
			<!--v-on-->
			<!-- 完整语法 -->
			<a v-on:click="doSomething"></a>
			<!-- 缩写 -->
			<a @click="doSomething"></a>
			
		</div>
		
		
		
		
		
		
		<script src="js/vue.js" ></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					a: 1,
					b: 2,
					id: 'divItem',
					yes: true,
					number: 10,
					seen: true,
					url: "www.baidu.com"
				},
				methods:{
					doSomething: function(){
						alert("doSomething!");
					}
				}
			});
			
			
		</script>
	</body>
</html>
